<template>
	<view class="wrapper" @click="onCloseClear">
		<view class="img-wrapper">
			<image :src="imgurl" mode="aspectFill"></image>
		</view>
		<view class="time-wrapper" v-if="isClear">
			<view class="date">
				{{currentDate}}
			</view>
			<view class="time">
				{{currentTime}}
			</view>
		</view>
		<view class="options" v-if="!isClear">
			<view class="options-item" @click.stop="onClearClick">
				<image src="../../static/img/clear.png" mode=""></image>
				<text>清屏预览</text>
			</view>
			<view class="options-item" @click="saveImg">
				<image src="../../static/img/download.png" mode=""></image>
				<text>下载保存</text>
			</view>
			<view class="options-item" @click="onShareClick">
				<image src="/static/img/share.png" mode=""></image>
				<text>分享壁纸</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgurl: '',
				isClear: false,
				locationIndex: '',
				title: '生成结果'
			}
		},
		computed: {
			currentDate() {
				const now = new Date();
				const month = String(now.getMonth() + 1); // 月份从0开始，所以需要+1，并使用padStart保证两位数
				const day = String(now.getDate()).padStart(2, '0'); // 使用padStart保证两位数
				const weekDays = ['日', '一', '二', '三', '四', '五', '六']; // 星期数组
				const week = weekDays[now.getDay()]; // 获取星期几

				// 拼接日期字符串
				return `${month}月${day}日 周${week}`;
			},
			currentTime() {
				const now = new Date();
				const hours = String(now.getHours()).padStart(2, '0'); // 确保小时数为两位数
				const minutes = String(now.getMinutes()).padStart(2, '0'); // 确保分钟数为两位数
				return `${hours}:${minutes}`; // 拼接小时和分钟
			},
		},
		onLoad(options) {
			this.imgurl = options.url
		},
		methods: {
			onBackClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			onCloseClear() {
				if(!this.isClear) return
				this.isClear = !this.isClear
			},
			onClearClick() {
				this.isClear = !this.isClear
			},
			saveImg() {
				let that = this
				//获取授权列表，查看是否授权写入相册权限
				uni.getSetting({
					success(res) {
						if (!res.authSetting['scope.writePhotosAlbum']) {
							uni.authorize({
								scope: 'scope.writePhotosAlbum',
								success() {
									that.saveimgtoAlbum(that.imgurl)
								}
							})
						} else {
							that.saveimgtoAlbum(that.imgurl)
						}
					}
				})
			},
			saveimgtoAlbum(imgurl) {
				//图片保存到本地
				let that = this
				uni.showLoading()
				uni.downloadFile({
					url: that.imgurl, //网络图片的地址
					success: function(res) {
						console.log(res, 'resres')
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function(data) {
								uni.hideLoading()
								uni.showToast({
									title: '保存成功',
									icon: 'none',
									duration: 2000
								})
							},
							fail: function(err) {
								console.log(err, 'xioxio');
								if (err.errMsg === 'saveImageToPhotosAlbum:fail auth deny') {
									setTimeout(() => {
										uni.showToast({
											title: '保存失败,您已经关闭相册权限,请在设置中打开',
											duration: 5000,
											icon: "none"
										})
									}, 100)
								} else {
									setTimeout(() => {
										uni.showToast({
											title: '保存失败',
											duration: 2000,
											icon: "none"
										})
									}, 100)
								}
								uni.hideLoading();
							},
							complete(res) {
								console.log(res);
							}
						})
					},
					fail: function(err) {
						setTimeout(() => {
							uni.showToast({
								title: '保存失败',
								duration: 2000,
								icon: "none"
							})
						}, 100)
						uni.hideLoading();
					}
				})
			},

			onShareClick() {
				wx.downloadFile({
					url: this.imgurl, //分享的图片的链接
					success: (res) => {
						wx.showShareImageMenu({
							path: res.tempFilePath
						})
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.wrapper {
		height: 100vh;
		background: #080808;
		.img-wrapper {
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			display: flex;
			justify-content: center;
			align-items: center;
			image {
				width: 100vw;
				height: 100vh !important;
			}
		}
	}

	.time-wrapper {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		top: 100px;
		display: flex;
		flex-direction: column;
		align-items: center;

		.date {
			font-size: 24px;
			color: #ffffff;
		}

		.time {
			font-size: 80px;
			color: #ffffff;
		}
	}

	.options {
		display: flex;
		align-items: center;
		position: fixed;
		left: 50%;
		bottom: 25px;
		transform: translateX(-50%);
		padding: 0 60px;

		&-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 28rpx;
			color: rgba(255, 255, 255, 0.50);
			width: 88px;
			height: 64px;
			background: rgba(0, 0, 0, 0.50);
			border-radius: 16px;
			backdrop-filter: blur(2px);

			image {
				width: 24px;
				height: 24px;
				margin-bottom: 4px;
			}
		}

		&-item:nth-child(2) {
			margin: 0 12px;
		}
	}
</style>
